<template>
  <div v-if="history.length > 0">
    <p style="margin-left: 1100px">找到相关新闻为{{ history.length }}条</p>
    <span v-for="item in history" :key="item.id" >
      <router-link :to="'/detailPage/' + item.news_id" class="product-link">
        <el-row>
          <el-col :span="3">
            <img :src="item.news_img" style="height: 130px; width: 100%" />
          </el-col>
          <el-col :span="21">
            <el-card class="box-card" style="height: 130px">
              <h3>{{ item.news_title }}</h3>
              <span>{{ item.digest }}</span
              ><br /> </el-card
          ></el-col>
        </el-row>
      </router-link>
    </span>
  </div>
  <!-- <div v-else>空</div> -->
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      history: "",
      news_id: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    getHistory() {
      console.log(this.user.user[0].uid);
      this.axios
        .get(
          `http://localhost:3000/users/getNewsHistory?uid=${this.user.user[0].uid}`
        )
        .then((res) => {
          this.history = res.data.data;
          // console.log(this.history);
          // console.log(this.news_id);
          // addHistory()
        })
        .catch((error) => {
          console.error(error);
        });
    },
    // addHistory() {
    //   this.axios
    //     .post(`http://localhost:3000/users/addNewsHistory`, {
    //       uid: this.user.user[0].uid,
    //       news_id: this.$route.params.id,
    //     })
    //     .then((res) => {
    //       // console.log(this.$route.params.id);
    //       this.history = res.data.data;
    //       // console.log(this.history);
    //       this.getHistory();
    //     })
    //     .catch((error) => {
    //       console.error(error);
    //     });
    // },
  },

  mounted() {
    //  console.log(userId());
    // console.log(this.user.user[0].uid);
    this.getHistory();
    // this.addHistory();
 
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

/* .item {
  margin-bottom: 18px;
} */

/* .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
} */

/* .el-card{
  height: 2000px;
 } */
</style>